import React, { useEffect, useState, memo, useRef, useMemo } from 'react'
import styled from 'styled-components'
import style from '@/assets/global-style'
import { debounce } from '@/api/utils'

const SearchBoxWrapper = styled.div`
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.3rem;
    padding-right: 1rem;
    height: 2rem;
    background-color: ${style["theme-color"]};
    .icon-back{
        font-size: 1.2rem;
        color:${style["font-color-light"]};
    }
    .box{
        flex:1;
        margin: 0 0.25rem;
        line-height: 0.9rem;
        background: ${style["theme-color"]};
        color: ${style["highlight-background-color"]};
        font-size: ${style["font-size-m"]};
        outline: none;
        border: none;
        border-bottom: 1px solid ${style["border-color"]};
        &::placeholder{
            color:${style["font-color-light"]};
        }
    }
    .icon-delete{
        font-size: 16px;
        color: ${style["background-color"]};
    }
`

const SearchBox = (props) => {
    // 解构父组件 props 时，分两部分：读 props、方法
    // newQuery 与 api 交流
    // 该组件 query 做 监听 防抖 好交给 newQuery
    const { newQuery } = props;
    const { handleQuery, back } = props;
    // useRef() 为下方组件 ref={queryRef} 提供挂载点
    const queryRef = useRef();
    const [query, setQuery] = useState('');
    // 控制 删除文本标志 是否显示
    const displayStyle = query ? { display: 'block' } : { display: 'none' };
    // 父组件 传过来的函数 封装一下
    // useMemo 可以缓存 上一次函数计算的结果
    let handleQueryDebounce = useMemo(() => {
        return debounce(handleQuery, 500)
        // 防抖后 返回 给父组件方法 handleQuery
    }, [handleQuery])

    const clearQuery = () => {
        setQuery('');
        queryRef.current.value = "";
        queryRef.current.focus();
    }
    const handleChange = (e) => {
        let val = e.currentTarget.value;
        setQuery(val)
        // 改变 query 转 -》useEffect监听query改变
    }
    // mount 挂载后 聚焦
    useEffect(() => {
        queryRef.current.focus();
    }, [])// mount 挂载后，生命周期
    // 使用 useEffect 更新
    useEffect(() => {
        // console.log(queryRef)
        // 监听到 query 改变后，传给useMemo保护的防抖函数
        handleQueryDebounce(query)
    }, [query])// query 更新
    useEffect(() => {
        // mount||newQuery 
        let curQuery = query;
        if (newQuery !== query) {
            curQuery = newQuery;
            queryRef.current.value = newQuery;
        }
        setQuery(curQuery)
    }, [newQuery])
    // newQuery 什么时候会传过来？？？ 猜：选中推荐输入名词后传过来

    return (
        <SearchBoxWrapper>
            {/* 返回标签 */}
            <i className='iconfont icon-back' onClick={() => back()}>&#xe655;</i>
            {/* 输入框 */}
            <input
                type="text"
                className="box"
                placeholder='搜索歌曲、歌手、专辑'
                ref={queryRef}
                onChange={handleChange}
            // 数据改变 -》handleChange 函数
            />
            {/* 删除输入框内容 */}
            <i
                className="iconfont icon-delete"
                style={displayStyle}
                onClick={clearQuery}
            >&#xe600;</i>
        </SearchBoxWrapper>
    )
}

export default memo(SearchBox)